<template>
    <div>
        <h1>理财项目列表</h1>
        理财编号:<input type="text" v-model="id" />&nbsp;&nbsp;
        理财名称:<input type="text" v-model="name" />&nbsp;&nbsp;
        理财收益:<input type="text" v-model="money1" />-<input type="text" v-model="money2" />

    
        <button class="btn btn-primary" @click="getInfo()">查询</button>
        <table class="table table-bordered table-hover" >
            <thead>
                <tr>
                    <th>理财编号</th>
                    <th>理财名称</th>
                    <th>年收益</th>
                    <th>月收益</th>
                    <th>最低理财金额</th>
                    <th>理财人数</th>
                    <th>风险等级</th>     
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in info " :key="item.F_Id">
                    <td>{{item.F_Id}}</td>
                    <td>{{item.F_Name}}</td>
                    <td>{{item.F_Apy.toFixed(2)}}</td>
                    <td>{{(item.F_Apy/12).toFixed(2)}}</td>
                    <td>{{item.F_MinMoney.toFixed(2)}}CNY</td>
                    <td>{{item.F_Number}}</td>
                    <td>{{item.F_Level==0?"低风险":(item.F_Level==1?"中风险":"高风险")}}</td>
                    <td>
                        <button class="btn btn-primary btn-sm" @click="UpdShowInfo(item.F_Id)">编辑</button>
                        <button class="btn btn-primary btn-sm" @click="DelInfo(item.F_Id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            共{{page.recordCount}}条记录，当前有{{page.pageSize}}条数据,当前第{{page.pageIndex}}/{{page.pageCount}}页
            <a href="#" @click="pages(1)">首页</a>
            <a href="#" @click="pages(page.pageIndex-1)">上一页</a>
            <a href="#" @click="pages(page.pageIndex+1)">下一页</a>
            <a href="#" @click="pages(page.pageCount)">尾页</a>
        </span>
   
    </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import router from '../../router';


const id=ref('');
const name=ref('');
const money1=ref('');
const money2=ref('');

const info :any= ref([]);
const page=ref(
    {
        pageSize:2,
        pageIndex:1,
        recordCount:1,
        pageCount:1,
    }
)
onMounted(() => {
    getInfo();
})

const pages = (i:number)=>{
    if(i>=1&&i<=page.value.pageCount)
    {
        page.value.pageIndex=i;
        getInfo();
    }
    else
    {
        alert("输入的页码不正确");
        return;
    }
}
const getInfo = () => {
    axios({
        method: 'get',
        url: 'http://localhost:57969/api/Finan/ShowFinanInfo',
        params: {          
            id:id.value,
            name:name.value,
            money1:money1.value,
            money2:money2.value,
            pageSize:page.value.pageSize,
            pageIndex:page.value.pageIndex,         
        }
    })
    .then(function (res) {
        info.value = res.data.list;
        page.value.recordCount= res.data.recordCount;
        page.value.pageCount= res.data.pageCount;
    })
    .catch(function (error) {
        console.log(error);
    });

}

const DelInfo = (id:number)=>{
    if(!confirm("确定要删除吗？"))
    {
        return;
    }
    axios({
        method: 'delete',
        url: 'http://localhost:57969/api/Finan/DelFinanInfo',
        params: {
            id:id,
        }
    })
    .then(function (res) {
        if(res.data>0)
        {
            alert("删除成功");
        }
        else
        {
            alert("删除失败");
        }

        pages(1);
        
    })
    .catch(function (error) {
        console.log(error);
    })

}

const UpdShowInfo = (id:number)=>{
    router.push({
        name:'FinanUpd',
        params:{
            id:id,
        }
    })
}






</script>
